 
<!-- 
  /*
 * @Author: zhanghongqiao 
 * @Date: 2023-03-09 09:47:06
 * @Email: 991034150@qq.com 
 * @Description: 左侧菜单
 * @Last Modified by: zhanghongqiao
 * @Last Modified time: 2023-03-16 15:58:54
 */
 -->

<template>
  <div class="side_menu">
    <el-menu :default-active="defaultActive" >
      <template v-for="item in memuList">  
        <!-- 一级菜单 -->
        <el-menu-item v-if="isEmpty(item.childList)"  
          :key="item.id" :index="item.id">  
          <!-- <router-link :to="{path: `${item.menuUrl}`}">
              <i class="iconfont">&#xe636;</i>
              <span>{{item.menuName}}</span>
          </router-link>   -->
           <a :key="item.id" :href="item.menuUrl" > 
              <el-tooltip v-if="defIsCollapse" :content="item.menuName" placement="right" effect="light" >
                <i class="iconfont" v-html="item.icon || '&#xe686;'"></i>
              </el-tooltip>
              <i v-else class="iconfont" v-html="item.icon || '&#xe686;'"></i>
              {{item.menuName}}
            </a>  
            
        </el-menu-item>  
        <!-- 有二级菜单 -->
        <el-sub-menu v-if="!isEmpty(item.childList)"  
            popper-class="top-menu-popper"  
            :key="item.id" :index="item.id">  
          <template #title>  
              <el-tooltip v-if="defIsCollapse" :content="item.menuName" placement="right" effect="light" >
                <i class="iconfont" v-html="item.icon || '&#xe686;'"></i>
              </el-tooltip>
              <i v-else class="iconfont" v-html="item.icon || '&#xe686;'"></i>
            <span>{{item.menuName}}</span>
          </template> 
          <MenuItem :menus="item.childList" />
        </el-sub-menu>  
      </template>  
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import './index.scss'
import { isEmpty } from "lodash"
import MenuItem from './menuItem.vue' 
import { commonStroe } from '@/stores/common'
import { ref, toRefs, watch, reactive, onMounted } from 'vue' 
import menuData from '@/apis/data/menuData'
import { RouteLocationNormalized }  from 'vue-router'  
import { useRouter } from 'vue-router'
import {storeToRefs} from 'pinia'
const router = useRouter()


const defIsCollapse = ref(false)

const props = defineProps({ 
    memuList: Array
})
 
// const { memuList } = toRefs(props) 
// const { memuList } = storeToRefs(commonStroe())
const memuList = menuData.result
const defaultActive = ref() 
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const finedSelectedMenuId = (data: any, router: string) => { 
  for(let i = 0; i < data.length; i++) {
    const item = data[i]
    if(item.menuUrl) {
      let arrs = item.menuUrl.split('#')
      if(arrs[1] === router) {
        return defaultActive.value = item.id
      }
    } 
    if(item.childList) {
      finedSelectedMenuId(item.childList, router)
    }
  } 
}

// onMounted(() => {
//   let path = location.hash.split('#') 
//   console.log(memuList)
//   finedSelectedMenuId(memuList, path[1])
// })

// watch(props, (data) => { 
//   let path = location.hash.split('#') 
//   finedSelectedMenuId(memuList, path[1])
// })



router.beforeEach((to: RouteLocationNormalized) => { 
 finedSelectedMenuId(memuList, to.path)
})

</script>